<template>
    <div class="happygogo-index">
        <van-nav-bar left-arrow>
            <van-icon name="wap-nav" slot="left" @click="$router.push('/me/me')"/>
            <span class="title-txt" slot="left">HappyGoGo</span>
        </van-nav-bar>
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index" class="banners">
                <span class="banner-txt">{{$t('m.Anyonecanbuyandsell')}}</span>
                <img :src="image" class="swiper-banner" @click="goToShopGoGo()"/>
            </van-swipe-item>
        </van-swipe>
        <div class="main-tabbar">
            <div class="tab-item" @click="goToShopGoGo()">
                <div class="tab-item-icon buysell">
                    <div class="icon-box">
                        <i class="icon icon-buysell-icon"></i>
                    </div>
                </div>
                <div class="tab-item-label">{{$t('m.BuySell')}}</div>
            </div>
            <div class="tab-item" @click="$router.push('/ybs/ybs')">
                <div class="tab-item-icon bus">
                    <div class="icon-box">
                        <i class="icon icon-bus-icon"></i>
                    </div>
                </div>
                <div class="tab-item-label">YBS</div>
            </div>
            <div class="tab-item" @click="$router.push('/movie/movie-list')">
                <div class="tab-item-icon movie">
                    <div class="icon-box">
                        <img src="../static/img/images/movie-icon.png" />
                    </div>
                </div>
                <div class="tab-item-label">{{$t('m.Movie')}}</div>
            </div>
            <!--<div class="tab-item" @click="$router.push('/train/train')">-->
                <!--<div class="tab-item-icon train">-->
                    <!--<div class="icon-box">-->
                        <!--<img src="../static/img/images/train.png" />-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="tab-item-label">Train</div>-->
            <!--</div>-->
            <!--<div class="tab-item" @click="goToProperty()">-->
                <!--<div class="tab-item-icon property">-->
                    <!--<div class="icon-box">-->
                        <!--<i class="icon icon-property-icon"></i>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="tab-item-label">{{$t('m.Property')}}</div>-->
            <!--</div>-->
        </div>

    </div>
</template>

<script>
export default {
    name: 'index',
    metaInfo: {
        title: 'Happygogo',
        titleTemplate: '%s - Happygogo',
        meta: [
            {name: 'keywords', content: 'bus line'},
            {name: 'description', content: 'happygogo'}
        ]
    },
    data() {
        return {
            images: [
                '../static/img/images/index-banners-1.png'
            ],
            firstBack: null,
        }
    },
    methods: {
        goToProperty() {
            window.open("https://bestproperty.com.mm/webPhone/index.html", "_blank");
        },
        goToShopGoGo() {
            location.href = "https://www.tolymoly.com.mm/";
        },
        goBack(){
            console.log(document.URL,'document.URL')
            console.log(document.referrer,'document.referrer')
            console.log(window.location.host,'window.location.host')
            // history.pushState(null, null, document.URL);
            // window.history.back()
            // this.backConfirm()
        },
        // backConfirm(){
        //     if (!this.firstBack) {
        //         this.firstBack = new Date().getTime();//记录第一次按下回退键的时间
        //         this.$toast('再按一次退出应用');//给出提示
        //         setTimeout(() => {//1s中后清除
        //             this.firstBack = null;
        //             history.pushState(null, null, document.URL);
        //         }, 1000);
        //     } else {
        //         if (new Date().getTime() - this.firstBack < 1000) {
        //             let documentReferrer = sessionStorage.getItem("documentReferrer") || '';
        //             if (documentReferrer != '' && !(documentReferrer.match(window.location.host))) {
        //                 // window.location.replace(documentReferrer)
        //                 window.location.href = documentReferrer
        //                 // window.history.go(documentReferrer)
        //             } else{
        //                 if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Chrome") !=-1) {
        //                     window.location.href="about:blank";
        //                     window.close();
        //                 } else {
        //                     window.opener = null;
        //                     window.open("", "_self");
        //                     window.close();
        //                 }
        //                 // history.pushState(null, null, document.URL);
        //             }
        //         } else {
        //             history.pushState(null, null, document.URL);
        //         }
        //     }
        // }
    },
    mounted() {
        // if (window.history && window.history.pushState) {
        //     history.pushState(null, null, document.URL);
        //     window.addEventListener('popstate', this.goBack, false);
        // }
    },
    destroyed(){
        // window.removeEventListener('popstate', this.goBack, false);
    },
    // beforeRouteEnter(to, from, next){
    //     let pageHistory = sessionStorage.getItem("fromPathPage") || '';
    //     let hs = [];
    //     if (pageHistory != '') {
    //         hs = JSON.parse(pageHistory)
    //         if (hs.length >= 10) {
    //             hs.shift()
    //             hs.push(from.fullPath)
    //         } else {
    //             hs.push(from.fullPath)
    //         }
    //
    //     } else {
    //         hs.push(from.fullPath)
    //     }
    //     hs = hs.filter((item, index, array) =>{
    //         return array.indexOf(item) === index;
    //     })
    //     sessionStorage.setItem("fromPathPage", JSON.stringify(hs));
    //     next();
    // },
    // beforeRouteLeave(to, from, next) {
    //     let pageHistory = sessionStorage.getItem("fromPathPage") || '';
    //     let hs = [];
    //     let leave = true;
    //     let isBack = false;
    //     if (pageHistory) {
    //         hs = JSON.parse(pageHistory)
    //         for (let i=0; i< hs.length; i++){
    //             if (to.fullPath == hs[i]){
    //                 leave = false;
    //                 isBack = true
    //                 break;
    //             }
    //         }
    //     }
    //     if (leave) {
    //         next()
    //     } else {
    //         if (isBack) {
    //             this.$toast('back~')
    //         }
    //         next(false)
    //     }
    // }

};
</script>
<style>
    .carousel-box .carousel__controls {
        background: rgba(0, 0, 0, 0) !important;
    }

    .carousel-box .carousel__controls__item {
        margin: 0 .2rem !important;
    }

    .carousel-box .btn--icon {
        width: 10px;
        height: 10px;
    }

    .carousel-box .material-icons {
        font-size: 6px !important;
    }

    .carousel-box .carousel__item {
        /*background-size: 100% 170px;*/
    }
    .happygogo-index .van-nav-bar .van-icon{
        color: #797979;
        margin-right: 15px;
        font-size: 18px;
        margin-top: -5px;
    }

</style>
<style scoped>
    .swiper-banner {
        width: 100%;
        /*height: 172px;*/
    }
    .banners{
        position: relative;
    }
    .banner-txt {
        position: absolute;
        top: 30px;
        left: 20px;
        width: 40%;
        font-size: 24px;
        white-space: pre-line;
    }
    .happygogo-index .van-nav-bar .title-txt {
        color: #f90;
        /*font-weight: 700;*/
        font-size: 16px;
        vertical-align: middle;
    }
    .main-tabbar{
        position: relative;
        background: #fff;
        display: flex;
        text-align:center;
        flex-wrap: wrap;
        margin-top: 8px;
        padding: 0 5px;
        border-bottom: 1px solid #eee;
    }
    .main-tabbar .tab-item{
        display: block;
        padding: 7px 0;
        /*width: 25%;*/
        flex: 1;
        text-decoration: none;
        color: #000;
    }
    .main-tabbar .tab-item-icon{
        width: 45px;
        height: 45px;
        margin: 0 auto 8px;
        /*border: 1px solid #FF9900;*/
        border-radius: 50%;
        padding: 10px;
    }
    .main-tabbar .tab-item-icon .icon-box{
        display: table-cell;
        vertical-align: middle;
        /*width: 44px;*/
        /*height: 44px;*/
        width: 100%;
        height: 100%;
    }
    .main-tabbar .tab-item-icon .icon-box img {
        width: 100%;
        /*height: 100%;*/
    }
    .tab-item-icon.bus{
        background: #28DD83;
    }
    .tab-item-icon.property{
        background: #FF6600;
    }
    .tab-item-icon.buysell{
        background: #5362EF;
    }
    .tab-item-icon.train{
        background: #41C7DB;
    }
    .tab-item-icon.movie{
        background: #FFCC00;
        padding: 5px;
    }
    .tab-item-icon .icon-property-icon{
        background-position: 0 -79px;
    }
    .tab-item-icon .icon-buysell-icon{
        background-position: 0 -26px;
    }
    .icon-box .icon{
        width: 25px;
        height: 25px;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .main-tabbar .tab-item-label{
        color: rgb(102, 102, 102);
        font-size: 14px;
        line-height: 20px;
        word-wrap:break-word;
        margin: 0 11%;
    }
    .main-tabbar .tab-item-icon.movie .icon-box img{
        margin-top: 5px;
    }
</style>
